<template>
  <div>
    <Collapse :value="[1, 2, 3]" style="display: flex;flex-wrap: nowrap;flex-flow: wrap;position: relative;">
      <Panel name="1" style="display: inline-block; flex: 1;margin-right: 15px;">
        最新主题
        <div class="content" slot="content">
          <Card class="card-item">
            <p slot="title">
              <Icon type="android-person"></Icon>
              Admin
            </p>
            <span slot="extra">3分钟前</span>
            <div>
              从来没有什么救世主， 不是神仙也不是皇帝。 更不是那些英雄豪杰， 全靠自己救自己！ 要杀尽那些强盗狗命， 就要有牺牲精神。 快快的当这炉火通红， 趁火打铁才能够成功！
            </div>
          </Card>
          <Card class="card-item">
            <p slot="title">
              <Icon type="android-person"></Icon>
              Admin
            </p>
            <span slot="extra">3分钟前</span>
            <div>
              我愿我能在横过孩子心中的道路上游行，解脱了一切的束缚；……在那儿，理智以它的法律造为纸鸢而飞放，真理也使事实从桎梏中自由了。
            </div>
          </Card>
          <Card  class="card-item">
            <p slot="title">
              <Icon type="android-person"></Icon>
              Admin
            </p>
            <span slot="extra">3分钟前</span>
            <div>
              真正的詩人哪怕在做夢的時候也是清醒的。他並沒有像著了魔似地被他的詩才所支配，而是牢牢地控制著它。他漫遊在伊甸園的聖林裡，就像在自己家鄉的小路上散步一樣自由自在。他高蹈於九天之上，卻並未因之如痴如醉。即使身處地獄，足踏著燃燒的火灰，他也毫不灰心喪氣；即使穿過天花板外的渾沌界和“黑夜的古國”，他依然毫不為難、得意翱翔。甚至，即使暫時讓自己處於“心靈失調”的嚴重渾沌狀態，他心甘情願地與李爾王一同發瘋，或者與泰門一同厭惡人類（這也算是一種瘋病吧），然而，不管他發瘋也好，厭惡人類也好，都不是毫無控制、任意氾濫的
            </div>
          </Card>
        </div>
      </Panel>
      <Panel name="2" style="display: inline-block; width: 33%;">
        最新注册会员
        <div slot="content">
          <Table stripe :columns="columns1" :data="users"></Table>
        </div>
      </Panel>
      <Panel name="3" style="display: inline-block; width: 33%;">
        系统信息
        <div slot="content">
          <Table stripe :columns="columns2" :data="system"></Table>
        </div>
      </Panel>
      <div class="info">
        <div style="display: block; padding: 10px; font-size: 18px; font-weight: 500; background-color: #fff;">浏览量 / 年</div>
        <div id="map" style="height: 300px;"></div>
      </div>
    </Collapse>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    props: {
      system: {type: Array},
      users: {type: Array}
    },
    data () {
      return {
        columns1: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Ip',
            key: 'loginIp'
          },
          {
            title: 'Email',
            key: 'email'
          }
        ],
        columns2: [
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '信息',
            key: 'info'
          }
        ]
      }
    },
    created () {
      setTimeout(() => {
        this.createMap()
      }, 100)
    },
    methods: {
      getVirtulData (year) {
        year = year || '2017'
        var date = +echarts.number.parseDate(year + '-01-01')
        var end = +echarts.number.parseDate((+year + 1) + '-01-01')
        var dayTime = 3600 * 24 * 1000
        var data = []
        for (var time = date; time < end; time += dayTime) {
          data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
          ])
        }
        return data
      },
      createMap () {
        let myChart = echarts.init(document.getElementById('map'))
        let options = {
          visualMap: {
            min: 0,
            max: 1000,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            top: 'top',
            inRange: {
              color: ['#fff', '#006edd'],
              opacity: 0.3
            },
            controller: {
              inRange: {
                opacity: 0.5
              }
            }
          },

          calendar: [
            {
              range: '2017',
              cellSize: ['auto', 20]
            }],

          series: [{
            type: 'heatmap',
            coordinateSystem: 'calendar',
            calendarIndex: 0,
            data: this.getVirtulData(2017)
          }]
        }
        myChart.setOption(options)
      }
    }
  }
</script>

<style lang="less">
  .card-item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .info {
    position: absolute;
    right: 0;
    left: 424px;
    top: 320px;
    height: 400px;
  }
</style>
